<template>
  <div>
    <search><span>设置</span></search>
    <div class="signout">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="用户名" name="1">{{
          userInfo.username
        }}</van-collapse-item>
        <van-collapse-item title="手机号" name="2">{{
          userInfo.phone
        }}</van-collapse-item>
      </van-collapse>
      <van-button class="btn_sig" type="primary" @click="SignOut" round block
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import search from "@/components/search/search.vue";
import { Dialog } from 'vant';
export default {
  components: {
    search,
  },
  data() {
    return {
      activeNames: ["1"],
      userInfo: {},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userInfo = this.$store.state.userInfo;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  methods:{
    SignOut(){
      Dialog.confirm({
  title: '设置',
  message: '是否退出登录？？？？',
})
  .then(() => {
     localStorage.removeItem('userInfo');
     localStorage.removeItem('myaddress');
     localStorage.removeItem('token');
     localStorage.removeItem('shopCar');
     this.$router.push('/login')
  })
  .catch(() => {
    // on cancel
  });
    }
  },
};
</script>
<style scoped lang="less">
@import "../assets/css/index.less";
.signout {
  width: 80vw;
  height: 100%;
  margin-left: 2vw;
  margin-top: 320 * @vw;
  padding: 120 * @vw;
}
.btn_sig {
  margin-top: 420 * @vw;
}
</style>